<!--
 * @FilePath: CarouselText.vue
 * @Author: jack
 * @Date: 2024-07-01 17:01:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-22 11:24:50
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="scroll-container">
        <div class="text-wrapper" :class="{ animate: isHide && isAnimated, stop: !isAnimated }" ref="contentsRef"
            :style="{ 'animation-duration': duration + 's' }">
            <!-- :style="{ 'animation-duration': duration * props.words.length * 0.4 + 's' }" -->
            <span ref="childRef" v-if="!isEditor">{{ props.words }}</span>
            <span ref="childRef" v-else v-html="props.words "></span>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, nextTick, onMounted, watch } from 'vue'
interface PropsType {
    words?: string
    duration?: number,
    isEditor?: boolean,
}
const props = withDefaults(defineProps<PropsType>(), {
    words: '', // 默认值
    duration: 25,
    isEditor: false
})
const isHide = ref<boolean>(false)
const contentsRef = ref<any>()
const childRef = ref<any>()
const width = ref<any>()
const contentOverflows = () => {
    const container = contentsRef.value;
    const content = childRef.value;
    width.value = '-' + childRef.value.scrollWidth + 'px'
    return content.scrollWidth > container.offsetWidth
}
const isAnimated = ref<boolean>(true);
const toggleAnimation = () => {
    isAnimated.value = !isAnimated.value;
};
watch(() => props.words,
    (newValue, old) => {
        nextTick(async () => {
            toggleAnimation()
            console.log(props.words)
            isHide.value = false
            isHide.value = await contentOverflows()
            setTimeout(() => {
                toggleAnimation()
            }, 0)
        })
    },
    { deep: true }
)
onMounted(() => {
    isHide.value = contentOverflows()
})
</script>
<style lang="scss" scoped>
.scroll-container {
    overflow: hidden;
    white-space: nowrap;
    width: 240px;
    box-sizing: border-box;
    display: inline-block;
    /* 设置父容器宽度 */
}

.text-wrapper {
    width: 100%;
    span {
        display: inline-flex;
        overflow: hidden;
        font-size: 16px;
        font-weight: bold;
        font-family: HarmonyOS Sans SC !important;
    }
}

.animate {
    animation-name: scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    /* 可以设置一个延迟开始的时间 */
}

.stop {
    transform: translateX(0%);
}

@keyframes scroll {
    from {
        transform: translateX(10%);
        image-rendering: pixelated;
        /* 对于旧浏览器 */
        image-rendering: crisp-edges;
    }

    to {
        transform: translateX(v-bind(width));
        image-rendering: pixelated;
        /* 对于旧浏览器 */
        image-rendering: crisp-edges;
    }
}

@keyframes scroll2 {
    from {
        transform: translateX(0%);
        image-rendering: pixelated;
        /* 对于旧浏览器 */
        image-rendering: crisp-edges;
    }

    to {
        transform: translateX(0%);
        image-rendering: pixelated;
        /* 对于旧浏览器 */
        image-rendering: crisp-edges;
    }
}
</style>
